<template>
  <el-dialog
    v-model="dialogVisible"
    width="30%"
    :show-close="false"
    style="padding-right: 24px; padding-left: 24px"
  >
    <el-descriptions title="角色信息"
                     :column="1"
                     border
    >
      <el-descriptions-item label="用户名">{{data.name}}</el-descriptions-item>
      <el-descriptions-item label="描述">{{data.description}}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'RoleDetail',
  setup () {
    return {
      dialogVisible: ref(false),
      data: ref({})
    }
  }
}
</script>

<style scoped>

</style>
